<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏列表展示</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
            color: #333;
            line-height: 1.6;
        }

        .gameShow {
            max-width: 900px;
            margin: auto;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #5c5c5c;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 15px;
        }

        th, td {
            text-align: left;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #007bff;
            color: white;
            text-align: center;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #ddd;
        }

        td img {
            max-width: 200px;
            max-height: 100px;
        }

        /* 视频样式 */
        td video {
            max-width: 200px;
            max-height: 100px;

        }
    </style>
</head>
<body>

<div class="gameShow">
    <h1>
        <a href="index.html">上传游戏</a>
        管理游戏
    </h1>
    <table id="gamesTable">
        <thead>
        <tr>
            <th>GID</th>
            <th>名称</th>
            <th>日期</th>
            <th>发行商</th>
            <th>收藏</th>
            <th>PV</th>
            <th>CG</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 表格数据将通过JavaScript动态插入 -->
        </tbody>
    </table>
</div>

<script>
    // 使用fetch API调用后端端点并获取数据
    fetch('/game/all')
        .then(response => response.json())
        .then(data => {
            if (data.code === 200) {
                var games = data.data;
                var tableBody = document.getElementById('gamesTable').getElementsByTagName('tbody')[0];

                games.forEach(function(game) {
                    var row = tableBody.insertRow();
                    // ...创建其他单元格...
                    var cells = ['gid', 'name', 'date', 'publisher', 'collect'];
                    var cellValues = cells.map(cell => game[cell] || '无');
                    cellValues.forEach((value, index) => {
                        var newCell = row.insertCell(index);
                        newCell.textContent = value;
                    });

                    // 添加PV视频和CG图片
                    var pvCell = row.insertCell(-1);
                    var pvVideo = document.createElement('video');
                    pvVideo.src = '/game/resource?fileName=op.webm&gid='+ game.gid;
                    pvVideo.muted=true;
                    pvVideo.autoplay=true;
                    pvVideo.controls=true;
                    pvCell.appendChild(pvVideo);

                    var cgCell = row.insertCell(-1);
                    var cgImg = document.createElement('img');
                    cgImg.src = '/game/resource?fileName=1.png&gid='+ game.gid
                    cgImg.alt = 'CG';
                    cgCell.appendChild(cgImg);
                    // 添加操作列和删除按钮
                    var operationCell = row.insertCell(-1);
                    var deleteButton = document.createElement('button');
                    deleteButton.textContent = '删除';

                    // 绑定删除按钮的点击事件，并传递当前游戏的GID和行引用
                    deleteButton.onclick = function() {
                        if (confirm('确定要删除这个游戏吗?')) {
                            fetch('/game/delete?gid=' + game.gid, {
                                method: 'GET',
                            })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.code === 200) {
                                        // 删除成功，从表格中移除对应的行
                                        tableBody.removeChild(row); // 使用tableBody.removeChild(row)删除行
                                    } else {
                                        alert("删除失败: " + data.msg);
                                    }
                                })
                                .catch(error => {
                                    console.error('请求失败:', error);
                                    alert("删除请求失败");
                                });
                        }
                    };
                    operationCell.appendChild(deleteButton);
                });
            } else {
                console.error(data.msg);
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
        });
</script>
</body>
</html>